$(function () {
    var galleryThumbsSlide = '';
    var galleryTopSlide = '';
    for (var i = 1; i <= 30; i++) {
        galleryThumbsSlide += '<div class="swiper-slide"><img src="./images/teacherStyle/t' + i + '.jpg" alt=""></div>';
        galleryTopSlide += '<div class="swiper-slide"><div class="swiper-zoom-container"><img src="./images/teacherStyle/' + i + '.jpg" alt=""></div></div>';
    }
    $('.teacherStyle-container .gallery-thumbs .swiper-wrapper').html(galleryThumbsSlide);
    $('.teacherStyle-container .gallery-top .swiper-wrapper').html(galleryTopSlide);

    var teachers = $('.teacherStyle-container .gallery-thumbs .swiper-wrapper').children().length;
    //创建教师缩略图滑动列表
    var galleryThumbs = new Swiper('.teacherStyle-container .gallery-thumbs', {
        spaceBetween: 0,
        freeMode: true,
        slidesPerView: 10,
        slidesPerColumn: 3,
        touchStartPreventDefault : false,
        preventLinksPropagation : false,//阻止滑动时触发点击事件
        autoHeight: true, //高度随内容变化
        width: undefined, //高度随内容变化
        slidesPerColumnFill: 'row',
        centerInsufficientSlides: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        pagination: {
            el: '.teacherStyle-container .gallery-thumbs .swiper-pagination',
            type: 'progressbar',
            clickable: true,
        },
        breakpoints: {
            1200: {
                slidesPerView: teachers > 30 ? teachers/3 : 10,
            },
            993:{
                slidesPerView: teachers > 30 ? teachers/3 -2 : 8.5,
            },
            785:{
                slidesPerView: teachers > 30 ? teachers/3 -4 : 6.5,
            },
            577:{
                slidesPerView: teachers > 30 ? teachers/3 -4 : 5.5,
            },
            497:{
                slidesPerView: teachers > 30 ? teachers/3 -4 : 6.3,
            },
            414:{
                slidesPerView: teachers > 30 ? teachers/3 -4 : 5.5,
            },
            370:{
                slidesPerView: teachers > 30 ? teachers/3 -4 : 5.2,
            },
            348:{
                slidesPerView: teachers > 30 ? teachers/3 -4 : 4.5,
            },
            310:{
                slidesPerView: teachers > 30 ? teachers/3 -4 : 3.5,
            }
        }
    });
    //创建教师滑动容器
    var galleryTop = new Swiper('.teacherStyle-container .gallery-top', {
        spaceBetween: 10,
        hideOnClick: true,
        grabCursor : true,
        zoom: {
            maxRatio: 2,
        },
        autoHeight: true, //高度随内容变化
        watchSlidesProgress : true,
        watchSlidesVisibility : true,
        navigation: {
            nextEl: '.teacherStyle-container .swiper-button-next',
            prevEl: '.teacherStyle-container .swiper-button-prev',
        },
        thumbs: {
            swiper: galleryThumbs
        }
    });
});
